<%= title t"register.general.title" %>
<%= queue_js "jquery.validate.js" %>
<% content_for :sidebar do %>
    <legend><h4>Nội quy</h4></legend>
    <p>Deer notwithstanding misunderstood the the coasted especially and reset this about much pithily some sorrowful iguana less so unproductively far more a hatchet following this far against across some that dashing as caterpillar faulty due ready alas pending so imminent irrespective oh llama luxuriant wolf.</p>
    <legend><h4>Thành viên mới đăng ký</h4></legend>
<% end %>
<% content_for :queue_css do %>
    <style type="text/css">
        /*additional css here*/
        .help-inline{
            font-size:12px;
        }
    </style>
<% end %>
<legend><h4 style="padding-left:180px;text-transform: uppercase;"><%=t"register.general.title" %></h4></legend>
<%= render "frontend/portal/partials/topnotify" %>
<form class="form-horizontal register-form" id="register-form" method="post" action="<%= request.fullpath %>">
  <div class="control-group">
    <label class="control-label" for="inputEmail"><%=t"register.form.email"%></label>
    <div class="controls">
      <div class="input-prepend">
        <span class="add-on"><i class="icon-envelope"></i></span>
        <input  id="inputEmail" name="email" type="text" placeholder="<%=t"register.form.email"%>" rel="popover" data-content="Email liên lạc của bạn" data-original-title="Email">
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputLoginname"><%=t"register.form.loginname"%></label>
    <div class="controls">
      <div class="input-prepend">
        <span class="add-on"><i class="icon-user"></i></span>
        <input  id="inputLoginname" type="text" name="loginname" placeholder="<%=t"register.form.loginname"%>" rel="popover" data-content="Tên tài khoản đăng nhập" data-original-title="Tên tài khoản">
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword"><%=t"register.form.password"%></label>
    <div class="controls">
      <div class="input-prepend">
        <span class="add-on"><i class="icon-eye-open"></i></span>
        <input  id="inputPassword" type="password" name="password" placeholder="<%=t"register.form.password"%>"  rel="popover" data-content="Chọn nhập một mật khẩu" data-original-title="Mật khẩu">
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPasswordRepeat"><%=t"register.form.repeatpassword"%></label>
    <div class="controls">
      <div class="input-prepend">
        <span class="add-on"><i class="icon-eye-open"></i></span>
        <input  id="inputPasswordRepeat" type="password" name="password_confirmation" placeholder="<%=t"register.form.repeatpassword"%>"  rel="popover" data-content="Xác nhận mật khẩu đã nhập" data-original-title="Xác nhận mật khẩu">
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="reg-submit-btn"></label>
    <div class="controls">
      <button type="submit" id="reg-submit-btn" class="btn btn-success" rel="tooltip" title="Tạo tài khoản">Tạo tài khoản</button>
      <%= link_to " Đã có tài khoản?", :controller => "frontend/portal" %>
    </div>
  </div>
</form>
<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="text|password"]').click(function()
        {
            $(this).popover('toggle')
        });
        $('#inputEmail').change(function(){
            $('#inputLoginname').val($(this).val().split("@")[0])
        });
        $("#register-form").validate({
            rules:{
                loginname:{
                    required: true,
                    maxlength: 20,
                    minlength: 5
                },
                email:{
                    required:true,
                    email: true
                },
                password:{
                    required:true,
                    minlength: 6
                },
                password_confirmation:{
                    required:true,
                    equalTo: "#inputPassword"
                }
            },
            messages:{
                loginname:"Tên đăng nhập: a-z,0..9 độ dài 5-20 kí tự",
                email:{
                    required:"Bạn chưa điền email",
                    email:"Email không hợp lệ"
                },
                password:{
                    required:"Bạn chưa nhập mật khẩu",
                    minlength:"Mật khẩu phải nhiều hơn 6 kí tự"
                },
                password_confirmation:{
                    required:"Hãy xác nhận mật khẩu",
                    equalTo:"Xác nhận mật khẩu không khớp"
                }
            },
            errorClass: "help-inline",
            errorElement: "span",
            highlight:function(element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
                $(element).parents('.control-group').addClass('success');
            }
        });
    });
</script>
